<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>09.v-for-key</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <ul>
                <li v-for="(ingredient,i) in ingredients" :key="ingredient">
                    {{ingredient}} ({{i}})
                </li>
            </ul>
            <hr />
            <button @click="ingredients.push('spices')">Add New</button>
            <button @click="updateSimpleArray">更新简单数组</button>
            <button @click="updatePersonArray">更新数组对象</button>
            <button @click="updateUserObj">更新对象属性</button>
            <button @click="updateValue">更新基础数据</button>
            <!-- TODO:实现简单数组的更新 -->

            <ul>
                <li v-for="person in persons">
                    <!--直接输出对象属性-->
                    <!--{{person.name}}-->
                    <!--嵌套循环输出对象-->
                    <!--
           			<span v-for="value in person">
           				{{value}}
           			</span>
-->
                    <!--嵌套循环输出对象的键值对-->
                    <!--
           			<span v-for="(value,key) in person">
           				 {{key}}：{{value}}
           			</span>
-->
                    <!--嵌套循环输出对象的键值对及下标信息-->
                    <span v-for="(value,key,index) in person">
                        {{key}}：{{value}} ({{index}})
                    </span>
                </li>
                <hr />
                <span v-for="n in 10">{{n}}</span>
            </ul>
            <template v-for="(ingredient,index) in ingredients">
                <h1>{{ingredient}}</h1>
                <p>{{index}}</p>
            </template>

            <!-- 显示userObj内容 -->
            <p>{{userObj}}</p>
            <p>{{age}}</p>
        </div>
        <script type="text/javascript">
           const vm =  new Vue({
                el: '#app',
                data: {
                    ingredients: ['meat', 'fruit', 'cookies'],
                    persons: [
                        { name: 'Vane', age: 38, color: 'red' },
                        { name: 'Fang', age: 27, color: 'blue' },
                    ],
                    userObj:{
                        name:'xxx',
                        sex:'nan',
                    },
                    age: 18,
                },
                methods:{
                    updateSimpleArray() {
                        this.ingredients.splice(1,1,'soup');
                    },
                    //更新数组中的对象
                    updatePersonArray(){
                        // ! 可以对数组指定下标的对象的属性进行修改的修改
                        // this.persons[1].name = 'xxx';
                        //可以利用数组的变异函数对数组指定下标的内容进行整体修改
                        // this.persons.splice(1,1,{
                        //     name:'xxx',
                        //     age: 27,
                        //     color:'blue',
                        // });
                        //! 对于数组的对象,直接利用下标将数组对象进行修改是无法实现的
                        this.perosns[1] = {
                            name:'xxx',
                            age: 27,
                            color:'blue',
                        };
                    },
                    updateUserObj() {
                        // ! 对于对象当中的现有属性内容可以直接更新
                        this.userObj.name = '张三';
                        //  新增对象的属性，如果直接进行对象属性的添加是不成功的
                        this.userObj.age = 28;
                        //!如果给对象添加的新属性,则需要利用this.$set进行操作
                        this.$set(this.userObj ,'age',28);
                    },
                    updateValue() {
                        this.age = 20;
                    },
                    updateValue() {
                        this.age = 20;
                    },
                },
            });
            console.log(vm);
        </script>
    </body>
</html>
 